<template>
  <div>
    <div class="amap-wrap">
      <el-amap
        vid="amapContainer"
        :events="events"
        class="amap-demo"
        :zoom="zoom"
        :amap-manager="amapManager"
        :center="center"
      >
        <!-- 覆盖物圆 -->
        <el-amap-circle
          v-for="item in circle"
          :key="item.id"
          :center="item.center"
          :radius="item.radius"
          :fillColor="item.color"
          :strokeColor="item.color"
          :strokeOpacity="item.strokeOpacity"
          :strokeWeight="item.strokeWeight"
        ></el-amap-circle>
        <!-- 覆盖物圆 门店信息  offset="text.offset" :extData="item" :events="item.events"-->
        <!-- <el-amap-marker v-for="(item,index) in parking" :key="item.id" :content="item.content" :position="item.position" :vid="index" ></el-amap-marker> -->
        <el-amap-marker
          v-for="(item,index) in parkingtwo"
          :key="item.id"
          :extData="item"
          :events="item.events"
          :content="item.content"
          :position="item.position"
          :vid="index"
        ></el-amap-marker>

        <el-amap-text
          v-for="(item,index) in parkingtwo"
          :key="item.id+index"
          :text="item.text"
          :offset="item.offset"
          :position="item.position"
        ></el-amap-text>
      </el-amap>
      <!-- :amap-manager="amapManager" :center="center"  
​​
      蜗牛学院R: 104.06081 30.57609-->
    </div>
    
    <!-- 模态框 -->
     <div>
        <el-dialog  :visible.sync="dialogFormVisible" @close="closeDialog">
         <div>
        <el-table :data="RentCarInfoList" style="width: 100%">
           <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="用户id"></el-table-column>
        <el-table-column prop="member" label="会员等级"></el-table-column>
        <el-table-column prop="auth" label="是否认证"></el-table-column>

        

        <el-table-column prop="amout" label="贷款金额"></el-table-column>
        <el-table-column prop="overdue" label="逾期金额"></el-table-column>
        <el-table-column prop="statu" label="账户状态"></el-table-column>
       
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

        
        
      </el-table>

        </div>     

        </el-dialog>
    </div>



    <div id="panel"></div>
  </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
import axios from "axios";
import { Walking } from "./common";
// 方法
let amapManager = new AMapManager();
export default {
  name: "Amap",
  data() {
    const _this = this;
    return {
      // 经纬度
      map: null,
      amapManager,
      center: [104.06081, 30.57609],
      zoom: 8,
      events: {
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            _this.initMap();
          });
        }
      },
      dialogFormVisible: false,
      RentCarInfoList:[],
      lng:"",
      circle: [
        {
          center: [0, 0],
          radius: "4",
          color: "#FF0000",
          strokeOpacity: "0.5",
          strokeWeight: "30"
        }
      ],

      // parking:[
      //     {
      //         id:1,
      //         content:"<img src='"+require('@/images/car.png')+"' />",
      //         position:[104.06081,30.59609]
      //     },
      //     {
      //         id:2,
      //         content:"<img src='"+require('@/images/car.png')+"' />",
      //         position:[104.1565424372598,30.677667651702343]
      //     },
      //     {
      //         id:3,
      //         content:"<img src='"+require('@/images/car.png')+"' />",
      //         position:[104.02268596723346,30.672079150665734]
      //     },
      //     {
      //         id:4,
      //         content:"<img src='"+require('@/images/car.png')+"' />",
      //         position:[104.07321584358176,30.72099766302973]
      //     },
      // ],
      // parkingCarsNumber:[
      //     {
      //        id:1,
      //        text:"5",
      //        offset:[25,-30],
      //        position:[104.06081,30.59609]

      //     },
      //     {
      //        id:2,
      //        text:"5",
      //        offset:[25,-30],
      //         position:[104.1565424372598,30.677667651702343]

      //     },
      //     {
      //        id:3,
      //        text:"5",
      //        offset:[25,-30],
      //         position:[104.02268596723346,30.672079150665734]

      //     },
      //     {
      //        id:4,
      //        text:"5",
      //        offset:[25,-30],
      //         position:[104.07321584358176,30.72099766302973]

      //     },

      // ],
      // parkingtwo: [],
      // parkingNumbertwo: []
    };
  },
  mounted() {
    
    // lazyAMapApiLoaderInstance 为了加载高德地图的API
    // lazyAMapApiLoaderInstance.load().then(() => {
    //     this.map=new AMap.Map('amapContainer',{
    //         center:new AMap.lnglat(),
    //         zoom:this.zoom,//初始化地图层级
    //     });
    //     });
  },
  props:{
      parkingtwo:{
        type:Array,
        default:()=>([])
      }
    },
    
  created() {
    //生命周期方法
    this.getParking();
    // this.getnumber();
  },
  methods: {
    getParking() {
      this.$axios
        .get("http://localhost:8601/finance/getUserdetails", {
          params: {
            // pageIndex: this.pageIndex,
            // pageSize: this.pageSize,
          }
        })
        .then(resp => {
          console.log(resp.data.data);
          var _data = resp.data.data;
          console.log(_data);
          _data.forEach(item => {
            console.log("aaaa")
            item.position = item.ulongitude.split(",");
            item.content = "<img src='" + require("@/images/zqq.png") + "' />";
            // item.text='<div>${item.parkcarnumber}</div>';
            item.text = '名字:'+item.uname;
            item.offset = [20, -50];
            // item.offset = [0, 0];
            item.events = {
              click: e => this.walking(e)
            };
          });
          this.parkingtwo = _data;
          console.log("aaaaa");
          console.log(this.parkingtwo);
        });
    },
    walking(e) {

        console.log(this.circle[0].center);
        const data= e.target.getPosition();
        const position=[data.lng,data.lat];
        console.log(position);
      //  console.log(data);
        this.handlerWalking(position);
        this.getRentCarInfo(data.lng);
        
    },
    getRentCarInfo(lng){
       this.lng=lng;
       this.dialogFormVisible=true;
       this.$axios.get("http://localhost:8601/finance/getUserBylon",{
         params:{
             lng:this.lng
         }
       }).
         then(resp=>{
           console.log(resp.data.data);
          this.RentCarInfoList=resp.data.data;
         });
    },
    handlerWalking(position){
        Walking({
            map:this.map,
            position_satrt:this.circle[0].center,
            position_end:position,
        })

    //  var walking = new AMap.Walking({
    //     map: this.map,
    //     panel: "panel"
    // }); 
    // //根据起终点坐标规划步行路线
    // walking.search([104.07054,30.572454], [105.724313,30.759003], function(status, result) {
    //     // result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
    //     if (status === 'complete') {
    //         console.log.success('绘制步行路线完成')
    //     } else {
    //       console.log('步行路线数据查询失败' + result);
    //     } 
    // });

    },
    

    initMap() {
      this.map = amapManager.getMap();
      // let marker=new AMap.Marker({
      //   position:[104.07274727,30.57899372]
      // });
      // marker.setMap(this.map);
      // console.log(this.map);
      // 浏览器定位
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 10000, //超过10秒后停止定位，默认：5s
        buttonPosition: "RB", //定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        markerOptions: {
          content: ""
        }
      });
      this.map.addControl(geolocation);
      geolocation.getCurrentPosition((status, result) => {
        if (status == "complete") {
          const lng = result.position.lng;
          const lat = result.position.lat;
          this.circle[0].center = [lng, lat];
        } else {
        }
      });
    }
  }
};
</script>

<style>
.amap-wrap {
  /* width: 100%; */
  height: 100vh;
}
</style>